import { connect } from 'react-redux';
import React from 'react';
import { Spin } from 'antd';
import styles from './index.module.scss';

interface IProps {
  data: string;
  loading: boolean;
}

const JokeDetail = (props: IProps) => {
  const { data = '', loading = false } = props;
  return (
    <div className={styles.joke}>
      {data}
      <Spin spinning={loading} size="large" />
    </div>
  );
};

const mapStateToProps = (state: IProps) => ({
  data: state.data,
  loading: state.loading,
});

export default connect(mapStateToProps)(JokeDetail);
